<template>
<!--  <div>服务端档案挂接日志</div>-->
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <fileTrees @handleNodeClick="onTreeClick" :tableHeight="treeHeight" :isnoClick="isnoClick" :menuId="menuId"></fileTrees>
      </el-col>
      <el-col :span="20" :xs="24" v-show="isShowTable">
        <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch"
                 label-width="68px">
          <el-form-item label="操作方式" prop="operationMode">
            <el-select v-model="queryParams.operationMode" placeholder="请选择" clearable>
              <el-option v-for="(dict, index) in operationType" :key="index" :label="dict.label"
                         :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
          </el-form-item>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-form>
        <el-table v-loading="loading" :data="DataList" :height="tableHeight">
          <el-table-column label="序号" type="index" :index="table_index" align="center" prop="id"/>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button  type="text" @click="showLog(scope.row)">查看日志</el-button>
              <el-button  type="text" @click="downLoadLog(scope.row)">下载日志</el-button>
            </template>
          </el-table-column>
          <el-table-column label="挂接时间" prop="articulatedTime" align="center" />
          <el-table-column label="挂接结果" prop="articulatedResults" align="center" />
          <el-table-column label="重复数据操作方式" prop="operationMode" align="center" />
          <el-table-column label="操作人员" prop="createBy" align="center" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
      </el-col>
    </el-row>

    <showLog :logOpen="logOpen" :logLoading="logLoading" :logTotal="logTotal" :logList="logList" :logParams="logParams" @showLogCancel="showLogCancel" @getLogList="getLogList"></showLog>
  </div>
</template>

<script>
import treeHeight from '@/mixins/treeHeight'
import estimateTableHeight from "@/mixins/estimateTableHeight";
import fileTrees from "@/components/fileTrees/index.vue"
import {getServerLogList, serverList} from "@/api/archive/digitalizeReceive/serverHookLog";
import showLog from "@/views/archive/digitalizeReceive/clientArchiveHook/showLog"
//计算左侧树的高度
export default {
  name: "index",
  mixins: [ treeHeight, estimateTableHeight ], // 混入方法
  components: { fileTrees, showLog },
  data() {
    return {
      menuId: '',
      isnoClick:true,
      isShowTable: false,
      showSearch: true,
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        operationMode: undefined
      },
      operationType: [
        {value: '1', label: '跳过'},
        {value: '2', label: '覆盖'},
        {value: '3', label: '追加'}
      ],
      loading: true,
      DataList: [],
      total: 0,

      // 日志
      logOpen: false,
      logLoading: true,
      logTotal: 0,
      logList: [],
      logParams: {
        pageNum: 1,
        pageSize: 10,
      }
    }
  },
  created() {
    this.menuId = this.$route.meta.menuId
    this.getList()
  },
  methods: {
    // 树节点单击事件
    onTreeClick(data) {
      console.log(data)
      this.isnoClick=false;
      if (data.nodeType == null || data.nodeType == "t" || data.nodeType == "f") {
        this.isShowTable = false
        this.isnoClick=true;
        return;
      }
      this.queryParams = {
        pageSize: 10,
        pageNum: 1,
        operationMode: undefined
      }
      this.isShowTable = true
      this.queryParams.categoryId = data.categoryId
      this.getList()
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.getList()
    },
    getList() {
      this.loading = true
      serverList(this.queryParams).then(response=>{
        this.DataList = response.rows
        for (let i = 0; i < response.rows.length; i++) {
          for (let j = 0; j < this.operationType.length; j++) {
            if(response.rows[i].operationMode == this.operationType[j].value) {
              this.DataList[i].operationMode = this.operationType[j].label
            }
          }
        }
        this.total = response.total
        this.loading = false
        this.isnoClick=true
      })
    },
    table_index(index){
      return (this.queryParams.pageNum-1) * this.queryParams.pageSize + index + 1;
    },
    showLog(row) {
      this.logParams.id = row.id
      this.getLogList()
    },
    downLoadLog(row){
      this.logParams.id = row.id;
      var data={
        id:this.logParams.id
      }
      data = JSON.stringify(data);
      let dataParams = {
        data1 : data
      }
      this.download('/archive/yqdaarticulated/exportServerLog', {
        ...dataParams
      }, `log_${new Date().getTime()}.xlsx`)
    },
    getLogList(logParams) {
      // console.log(this.logParams,'========', logParams)
      if(logParams!=null && logParams!=undefined){
        this.logParams.pageNum = logParams.pageNum
        this.logParams.pageSize = logParams.pageSize
      } else {
        this.logParams.pageNum = 1
        this.logParams.pageSize = 10
      }
      getServerLogList(this.logParams).then(response=>{
        this.logLoading = false
        this.logList = response.rows
        for (let i = 0; i < response.rows.length; i++) {
          let fileExtension = response.rows[i].docName.split('.').pop();
          this.logList[i].docFileType = fileExtension
        }
        this.logTotal = response.total
        this.logOpen = true
      })
    },
    showLogCancel() {
      this.logOpen = false
    },
  }
}
</script>

<style scoped>

</style>
